<template>
  <div class="box">
    <header class="header">
      <div class="left">
        <router-link tag="div" to="/" class="iconfont icon-zuojiantou1"></router-link>
        <h1>本周佳作</h1>
      </div>
    </header>
    <div class="content">
      <div class="hotList">
        <div class="video" @click="goDetail(item)" v-for="item of allgreenlist" :key="item.id">
          <p class="dishName">{{ item.grename }}</p>
          <div class="detail">
            <span class="userName">{{ item.time }}</span>
            <div class="right">
              <p class="skim iconfont icon-yanjing"><span>{{ item.playernum }}</span></p>
              <p class="collection iconfont icon-xingxing"><span>{{ item.colletnum }}</span></p>
            </div>
          </div>
          <img :src="item.greurl" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
export default {
  data () {
    return {
      bannerlist: [],
      allgreenlist: [],
      val: ''
    }
  },
  created () {
    axios.all([this.getAllGreenList ()])
      .then(axios.spread((allgreenData) => {
        let arr2 = []
        allgreenData.data.data.map(item2 => {
          arr2.push(item2)
        })
        this.allgreenlist = allgreenData.data.data
      }))
  },
  methods: {
    getAllGreenList () {
      return axios.get('http://10.8.162.81:8082/greens/weekgre')
    },
    goDetail (item) {
      this.$router.push(`/fooddetail?id=${item.id}`)
    },
    goSearchList (e) {
      var dom =e.target
      console.log(dom.innerText)
      this.val = dom.innerText
      sessionStorage.setItem('search', this.val)
      this.$router.push(`/searchlist2?typename=${this.val}`)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  .left {
    display: flex;
    align-items: center;
    margin-left: 15px;
    h1 {
      margin-left: 30px;
    }
  }
}
.content {
  width: 90%!important;
  margin: 0 auto;
  .mint-swipe {
    width: 100%;
    height: 160px;
    margin-top: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .hotList {
    h1 {
      margin: 10px 0;
      font-size: 18px;
    }
    .video {
      margin: 20px auto;
      width: 100%;
      .dishName {
        font-size: 14px;
        font-weight: 500;
      }
      .detail {
        margin-bottom: 5px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .userName {
          color: #9394AF;
          font-size: 12px;
        }
        .right {
          color: #9393B0;
          display: flex;
          p {
            font-size: 12px;
            margin-left: 15px;
            span {
              margin-left: 5px;
            }
          }
          .skim {
          }
          .collection {
          }
        }
      }
      img {
        width: 100%;
        height: 211px;
        border-radius: 3px;
      }
    }
  }
}
</style>
